<template>
  <material-card color="primary">
    <template #title>
      <small class="text-body-1">资源负载</small>
    </template>
    <v-row>
      <v-col
        cols="12"
        md="2"
      >
        <v-alert
          type="success"
          dense
        >
          {{ s }}
        </v-alert>
        <v-divider />
        <span class="mr-12">X Load:</span><i>{{ x }}%</i><br>
        <span class="mr-12">Y Load:</span><i>{{ x }}%</i><br>
        <span class="mr-12">Z Load:</span><i>{{ x }}%</i><br>
      </v-col>
      <v-col
        cols="12"
        md="1"
      >
        <p />
      </v-col>
      <v-col
        cols="12"
        md="9"
      >
        <v-row>
          <v-col
            cols="12"
            md="4"
          >
            <chart-x
              v-model="xData"
              name="chart-update-x"
              title="X Loader"
            />
          </v-col>
          <v-col
            cols="12"
            md="4"
          >
            <chart-x
              v-model="xData"
              name="chart-update-y"
              title="Y Loader"
            />
          </v-col>
          <v-col
            cols="12"
            md="3"
          >
            <progress-x
              v-model="z"
              title="Z Loader"
              :scale-size="130"
              :stroke-width="30"
            />
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </material-card>
</template>

<script>
  import ChartX from './chart/ChartX'
  import ProgressX from './chart/ProgressX.vue'

  export default {
    name: 'ChartUpdateX',
    components: {
      'chart-x': ChartX,
      'progress-x': ProgressX,
    },
    data: () => ({
      updateTimer: 0,

      xData: [
        { xLabel: '', yLabel: 0 },
      ],
      x: 20,
      z: 50,
      s: '负载正常',
    }),
    computed: {
    },
    created () {
      this.startReflash()
    },
    mounted () {
    },
    beforeDestroy () {
      clearInterval(this.updateTimer)
    },
    methods: {
      dataUpdate () {
        if (this.xData.length > 50) {
          this.xData.shift()
        }
        this.xData.push({
          xLabel: new Date().toLocaleTimeString(),
          yLabel: Math.random() * 100,
        })
        this.z = Math.random() * 100
      },
      startReflash () {
        clearInterval(this.updateTimer)
        this.updateTimer = setInterval(this.dataUpdate, 2000)
      },
    },
  }
</script>
